<template>
  <div class="admin-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-main">
          <div class="title-section">
            <h1 class="page-title">
              <el-icon class="title-icon">
                <User />
              </el-icon>
              管理员信息
            </h1>
            <p class="page-description">维护并管理系统管理员基本信息</p>
          </div>
          <div class="header-stats">
            <div class="stat-card">
              <div class="stat-number">{{ tableData.length }}</div>
              <div class="stat-label">当前显示</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ pagination.total }}</div>
              <div class="stat-label">总管理员</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button type="primary" @click="handleAdd" class="action-btn primary-btn">
          <el-icon>
            <Plus />
          </el-icon>
          <span>添加管理员</span>
        </el-button>

        <el-button @click="handleRefresh" class="action-btn refresh-btn">
          <el-icon>
            <Refresh />
          </el-icon>
          <span>刷新</span>
        </el-button>
      </div>

      <div class="action-right">
        <div class="search-container">
          <el-input v-model="searchKeyword" placeholder="搜索管理员姓名、邮箱..." :prefix-icon="Search" clearable
            class="search-input" @clear="handleSearch" @keyup.enter="handleSearch" />
          <el-button type="primary" @click="handleSearch" class="search-btn">
            搜索
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-wrapper">
        <el-table :key="tableData.length" :data="tableData" style="width: 100%" v-loading="loading" row-key="id" stripe
          border class="enhanced-table" :loading-text="'数据加载中...'">
          <el-table-column type="selection" width="55" />

          <el-table-column prop="id" label="ID" width="80" align="center">
            <template #default="{ row }">
              <el-tag size="small" type="info" class="id-tag">#{{ row.id }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="avatar" label="头像" width="100">
            <template #default="{ row }">
              <div class="avatar-container">
                <el-avatar :src="row.avatar" :alt="row.name" class="user-avatar" />
                <div class="avatar-status" :class="{ 'online': row.status }"></div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="姓名" width="120">
            <template #default="{ row }">
              <div class="name-cell">
                <span class="name-text">{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="email" label="邮箱" width="200">
            <template #default="{ row }">
              <div class="email-cell">
                <el-icon class="email-icon">
                  <Message />
                </el-icon>
                <span>{{ row.email }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="phone" label="电话" width="200">
            <template #default="{ row }">
              <div class="phone-cell">
                <el-icon class="phone-icon">
                  <Phone />
                </el-icon>
                <span>{{ row.phone }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="department" label="部门" width="120">
            <template #default="{ row }">
              <el-tag size="small" class="department-tag">{{ row.department }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="employeeId" label="工号" width="120" align="center">
            <template #default="{ row }">
              <code class="employee-id">{{ row.employeeId }}</code>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status ? 'success' : 'danger'" class="status-tag"
                :class="{ 'status-active': row.status, 'status-inactive': !row.status }">
                <el-icon class="status-icon">
                  <CircleCheck v-if="row.status" />
                  <CircleClose v-else />
                </el-icon>
                {{ row.status ? '正常' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="lastLogin" label="最后登录" width="160">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon class="time-icon">
                  <Clock />
                </el-icon>
                <span>{{ row.lastLogin }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="160">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon class="time-icon">
                  <Calendar />
                </el-icon>
                <span>{{ row.createTime }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="270" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <template v-if="row.status">
                  <el-button size="small" type="primary" @click="handleEdit(row)" class="action-btn-small edit-btn">
                    <el-icon>
                      <Edit />
                    </el-icon>
                    编辑
                  </el-button>

                  <el-button size="small" type="warning" @click="handleResetPassword(row)"
                    class="action-btn-small reset-btn">
                    <el-icon>
                      <Key />
                    </el-icon>
                    重置密码
                  </el-button>

                  <el-button size="small" type="danger" @click="handleDelete(row)"
                    :disabled="row.roles?.some(role => role.code === 'super_admin')"
                    class="action-btn-small delete-btn">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除
                  </el-button>
                </template>

                <template v-else>
                  <el-button size="small" type="success" @click="handleEnable(row)" class="action-btn-small enable-btn">
                    <el-icon>
                      <CircleCheck />
                    </el-icon>
                    启用
                  </el-button>
                </template>
              </div>
            </template>
          </el-table-column>

          <template #empty>
            <div class="empty-container">
              <div v-if="loading" class="loading-content">
                <el-icon class="loading-icon">
                  <Loading />
                </el-icon>
                <span>数据加载中...</span>
              </div>
              <div v-else class="empty-content">
                <el-icon class="empty-icon">
                  <DocumentDelete />
                </el-icon>
                <span>暂无数据</span>
              </div>
            </div>
          </template>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="enhanced-pagination" />
        </div>
      </div>
    </div>

    <!-- 管理员表单抽屉 -->
    <AdminFormDrawerSimple v-model:visible="drawerVisible" :admin-data="currentAdmin" :is-edit="isEditMode"
      @submit="handleFormSubmit" />

    <!-- 重置密码表单抽屉 -->
    <el-drawer v-model="resetPasswordVisible" title="重置密码" direction="rtl" size="500px"
      :before-close="handleResetPasswordClose" class="reset-password-drawer">
      <template #header>
        <div class="drawer-header">
          <el-icon class="drawer-icon">
            <Key />
          </el-icon>
          <span class="drawer-title">重置密码</span>
        </div>
      </template>

      <div class="drawer-content">
        <div class="admin-info-card">
          <el-avatar :src="currentResetAdmin.avatar" class="admin-avatar" />
          <div class="admin-details">
            <h3>{{ resetPasswordForm.name }}</h3>
            <p>{{ resetPasswordForm.email }}</p>
          </div>
        </div>

        <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="resetPasswordRules" label-width="100px"
          label-position="top" class="reset-form">
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="resetPasswordForm.newPassword" type="password" placeholder="请输入新密码" show-password
              class="password-input">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="resetPasswordForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password
              class="password-input">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="handleResetPasswordClose" class="cancel-btn">
            取消
          </el-button>
          <el-button type="primary" @click="handleResetPasswordSubmit" :loading="resetPasswordLoading"
            class="submit-btn">
            <el-icon>
              <Key />
            </el-icon>
            重置密码
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Refresh, Search, User, Message, Phone, Clock, Calendar,
  CircleCheck, CircleClose, Edit, Key, Delete, Loading, DocumentDelete,
  Lock
} from '@element-plus/icons-vue'
import AdminFormDrawerSimple from '@/components/AdminInfo/AdminFormDrawerSimple.vue'
import { get, simpleDelete, post, resetPassword, imgURL } from '@/axios';

// 响应式数据
const loading = ref(false)
const searchKeyword = ref('')
const tableData = ref([])

const searchStatus = ref(null) // 默认不筛选状态

const selectedDepartment = ref('') // 添加这行定义部门选择变量

// 重置密码相关状态
const resetPasswordVisible = ref(false)
const resetPasswordLoading = ref(false)
const resetPasswordFormRef = ref()
const currentResetAdmin = ref({})

// 重置密码表单数据
const resetPasswordForm = reactive({
  name: '',
  email: '',
  newPassword: '',
  confirmPassword: ''
})

// 分页参数
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

// 抽屉相关状态
const drawerVisible = ref(false)
const isEditMode = ref(false)
const currentAdmin = ref({})


// loadData方法
const loadData = async () => {
  try {

    const response = await get('/umsAdmin/page', {
      status: searchStatus.value, // 传入状态参数
      page: pagination.value.current,
      size: pagination.value.pageSize,
      //keyword: searchKeyword.value,
      name: searchKeyword.value,
      email: searchKeyword.value,
      phone: searchKeyword.value,
      department: selectedDepartment.value
    });

    tableData.value = response.records.map(item => ({
      id: item.id,
      name: item.name || '未知',
      email: item.email || '无',
      phone: item.phone || '无',
      department: item.department || '未分配',
      employeeId: item.employeeId || '无',
      avatar: imgURL + item.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      status: item.status,
      lastLogin: item.lastLoginTime ? formatDateTime(item.lastLoginTime) : '从未登录',
      createTime: formatDateTime(item.createTime),
    }));
    console.log('tableDate:', tableData); // 解除 Proxy 并打印

    pagination.value = {
      current: response.current,
      pageSize: response.size,
      total: response.total
    };
  } catch (error) {
    console.error('加载失败:', error);
    ElMessage.error('数据加载失败: ' + error.message);
  } finally {
    loading.value = false;
  }
}

// 格式化时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''

  // 处理后端返回的 LocalDateTime 格式
  if (typeof dateTime === 'string') {
    return dateTime.replace('T', ' ')
  }

  return dateTime
}

// 刷新
const handleRefresh = () => {
  searchKeyword.value = ''
  selectedDepartment.value = ''
  loadData()
}

// 搜索框——搜素处理
const handleSearch = async () => {
  try {
    loading.value = true;

    if (!searchKeyword.value.trim() && !selectedDepartment.value) {
      // 如果关键词和部门都为空，回退到普通加载
      return loadData();
    }

    // 调用搜索接口
    const response = await get('/umsAdmin/search', {
      page: 1, // 搜索重置到第一页
      size: pagination.value.pageSize,
      keyword: searchKeyword.value.trim(),
      department: selectedDepartment.value
    });

    // 处理搜索响应数据
    tableData.value = response.records.map(item => ({
      id: item.id,
      name: item.name || '未知',
      email: item.email || '无',
      phone: item.phone || '无',
      department: item.department || '未分配',
      employeeId: item.employeeId || '无',
      avatar: item.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      status: item.status,
      lastLogin: item.lastLoginTime ? formatDateTime(item.lastLoginTime) : '从未登录',
      createTime: formatDateTime(item.createTime),
    }));

    pagination.value = {
      current: response.current,
      pageSize: response.size,
      total: response.total
    };
  } catch (error) {
    console.error('搜索失败:', error);
    ElMessage.error('搜索失败: ' + error.message);
  } finally {
    loading.value = false;
  }
}


//新增和编辑
// 抽屉——新增处理
const handleAdd = () => {
  isEditMode.value = false
  currentAdmin.value = {}
  drawerVisible.value = true
}

// 抽屉——编辑处理
const handleEdit = (row) => {
  console.log('Editing admin data:', row); // 添加调试信息

  console.log('Status value:', row.status); // 查看status的实际值
  console.log('Status type:', typeof row.status); // 查看status的类型

  isEditMode.value = true
  currentAdmin.value = {
    ...row,
    status: row.status === true ? '正常' : '禁用'  // 将数字状态转换为字符串状态 
  }
  drawerVisible.value = true
}

// 处理表单提交
const handleFormSubmit = () => {
  // 无论是新增还是编辑，都重新加载数据以获取最新状态
  drawerVisible.value = false
  loadData()
}

// 重置密码表单验证规则
const resetPasswordRules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/(?=.*[a-zA-Z])/.test(value)) {
          callback(new Error('密码必须包含字母'));
        } else if (!/(?=.*\d)/.test(value)) {
          callback(new Error('密码必须包含数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetPasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

// 打开重置密码抽屉
const handleResetPassword = (row) => {
  currentResetAdmin.value = row;
  resetPasswordForm.name = row.name;
  resetPasswordForm.email = row.email;
  resetPasswordForm.newPassword = '';
  resetPasswordForm.confirmPassword = '';
  resetPasswordVisible.value = true;
};

// 重置密码提交方法
const handleResetPasswordSubmit = async () => {
  try {
    await resetPasswordFormRef.value.validate()

    resetPasswordLoading.value = true

    // 调用重置密码接口
    const response = await resetPassword(
      currentResetAdmin.value.id,
      resetPasswordForm.newPassword
    )

    if (response.code === 200) {
      ElMessage.success('密码重置成功')
      handleResetPasswordClose()
    } else {
      ElMessage.error(response.message || '密码重置失败')
    }
  } catch (error) {
    // 区分不同类型的错误
    if (error.response) {
      // 服务器返回的错误
      const status = error.response.status;
      if (status === 401) {
        ElMessage.error('未授权，请重新登录');
        router.push('/login');
      } else if (status === 403) {
        ElMessage.error('权限不足，无法执行此操作');
      } else {
        ElMessage.error(error.response.data.message || '服务器错误');
      }
    } else if (error.request) {
      // 请求已发出但没有响应
      ElMessage.error('网络错误，请检查您的连接');
    } else if (error.errors) {
      // 表单验证错误
      ElMessage.error('请正确填写表单');
    } else {
      // 其他错误
      ElMessage.error(error.message || '操作失败');
    }
  } finally {
    resetPasswordLoading.value = false;
  }
}

// 关闭重置密码抽屉
const handleResetPasswordClose = () => {
  resetPasswordVisible.value = false
  // 重置表单
  resetPasswordForm.name = ''
  resetPasswordForm.email = ''
  resetPasswordForm.newPassword = ''
  resetPasswordForm.confirmPassword = ''

  resetPasswordFormRef.value?.resetFields()
}

//禁用和启用
//禁用管理员
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定禁用管理员 ${row.name} 吗?`, '禁用确认')
    .then(async () => {
      try {
        loading.value = true
        const response = await simpleDelete('/umsAdmin/' + row.id)
        if (response?.code === 200) {
          await loadData()
          //ElMessage.success('禁用成功')
        } else {
          ElMessage.error(response?.message || '禁用失败')
        }
      } catch (error) {
        ElMessage.error(error.message || '禁用失败')
      } finally {
        loading.value = false
      }
    })
    .catch(() => {
      console.log('用户取消禁用')
    })
}

//启用管理员
const handleEnable = (row) => {
  ElMessageBox.confirm(`确定要启用管理员 ${row.name} 吗?`, '启用确认')
    .then(async () => {
      try {
        loading.value = true
        // 调用启用接口，传递状态为 true
        const response = await post('/umsAdmin/updateStatus', {
          id: row.id,
          status: true
        })
        await loadData() // 刷新列表
      } catch (error) {
        ElMessage.error(error.message || '启用失败')
      } finally {
        loading.value = false
      }
    })
    .catch(() => {
      console.log('用户取消启用')
    })
}


//分页处理

// 分页处理——页码切换时
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  pagination.value.current = 1
  loadData()
}

// 分页处理——当前页码切换时
const handleCurrentChange = (val) => {
  pagination.value.current = val
  loadData()
}


// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
// 主容器
.admin-management {
  background: #f8fafc;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

// 页面头部美化
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
    background-size: cover;
  }

  .header-content {
    position: relative;
    z-index: 1;
    padding: 32px 24px;
  }

  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .title-section {
    .page-title {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 12px 0;
      color: white;
      display: flex;
      align-items: center;
      gap: 12px;

      .title-icon {
        font-size: 32px;
      }
    }

    .page-description {
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      font-size: 16px;
      font-weight: 400;
    }
  }

  .header-stats {
    display: flex;
    gap: 20px;

    .stat-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 16px 20px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.2);

      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: white;
        line-height: 1;
      }

      .stat-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 4px;
      }
    }
  }
}

// 操作栏美化
.action-bar {
  background: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #e5e7eb;

  .action-left {
    display: flex;
    gap: 12px;

    .action-btn {
      height: 40px;
      padding: 0 20px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;

      &.primary-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        }
      }

      &.refresh-btn {
        background: white;
        border: 1px solid #d1d5db;
        color: #6b7280;

        &:hover {
          background: #f9fafb;
          border-color: #9ca3af;
          color: #374151;
        }
      }
    }
  }

  .action-right {
    .search-container {
      display: flex;
      gap: 8px;
      align-items: center;

      .search-input {
        width: 300px;

        :deep(.el-input__wrapper) {
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          border: 1px solid #e5e7eb;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          &.is-focus {
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            border-color: #667eea;
          }
        }
      }

      .search-btn {
        height: 40px;
        border-radius: 8px;
        background: #667eea;
        border: none;

        &:hover {
          background: #5a6fd8;
        }
      }
    }
  }
}

// 表格容器美化
.table-container {
  padding: 24px;

  .table-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
}

// 表格美化
.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      font-size: 14px;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    transition: all 0.3s ease;

    &:hover {
      background: #f8fafc !important;
      transform: scale(1.005);
    }

    td {
      border-bottom: 1px solid #f3f4f6;
      padding: 12px 0;
    }
  }

  // 头像容器
  .avatar-container {
    position: relative;
    display: inline-block;

    .user-avatar {
      border: 3px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        border-color: #667eea;
      }
    }

    .avatar-status {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ef4444;
      border: 2px solid white;

      &.online {
        background: #10b981;
      }
    }
  }

  // ID标签
  .id-tag {
    font-family: 'Courier New', monospace;
    font-weight: 600;
  }

  // 姓名单元格
  .name-cell {
    .name-text {
      font-weight: 600;
      color: #1f2937;
    }
  }

  // 邮箱和电话单元格
  .email-cell,
  .phone-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;

    .email-icon,
    .phone-icon {
      color: #9ca3af;
    }
  }

  // 时间单元格
  .time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 13px;

    .time-icon {
      color: #9ca3af;
    }
  }

  // 部门标签
  .department-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-weight: 500;
  }

  // 工号
  .employee-id {
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #374151;
  }

  // 状态标签
  .status-tag {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;

    .status-icon {
      font-size: 14px;
    }

    &.status-active {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
    }

    &.status-inactive {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: white;
      border: none;
    }
  }

  // 操作按钮
  .action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .action-btn-small {
      height: 32px;
      padding: 0 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 4px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      &.edit-btn {
        background: #3b82f6;
        border: none;
      }

      &.reset-btn {
        background: #f59e0b;
        border: none;
      }

      &.delete-btn {
        background: #ef4444;
        border: none;
      }

      &.enable-btn {
        background: #10b981;
        border: none;
        width: 100%;
      }
    }
  }

  // 空状态
  .empty-container {
    padding: 40px;

    .loading-content,
    .empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: #9ca3af;

      .loading-icon,
      .empty-icon {
        font-size: 48px;
        color: #d1d5db;
      }

      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }
  }
}

// 分页美化
.pagination-container {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: white;

  .enhanced-pagination {
    :deep(.el-pagination__total) {
      color: #6b7280;
      font-weight: 500;
    }

    :deep(.el-pager li) {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        background: #f3f4f6;
      }

      &.is-active {
        background: #667eea;
        color: white;
      }
    }

    :deep(.btn-prev),
    :deep(.btn-next) {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: #f3f4f6;
      }
    }
  }
}

// 重置密码抽屉美化
.reset-password-drawer {
  :deep(.el-drawer__header) {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;

    .drawer-header {
      display: flex;
      align-items: center;
      gap: 12px;

      .drawer-icon {
        font-size: 20px;
        color: #667eea;
      }

      .drawer-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
      }
    }
  }

  .drawer-content {
    padding: 24px;
    height: calc(100vh - 140px);
    overflow-y: auto;

    .admin-info-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      color: white;

      .admin-avatar {
        border: 3px solid rgba(255, 255, 255, 0.3);
      }

      .admin-details {
        h3 {
          margin: 0 0 4px 0;
          font-size: 18px;
          font-weight: 600;
        }

        p {
          margin: 0;
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
        }
      }
    }

    .reset-form {
      :deep(.el-form-item__label) {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
      }

      .password-input {
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          border: 1px solid #d1d5db;
          transition: all 0.3s ease;

          &:hover {
            border-color: #9ca3af;
          }

          &.is-focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
          }
        }
      }
    }
  }

  .drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .cancel-btn {
      height: 40px;
      padding: 0 20px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      background: white;
      color: #6b7280;

      &:hover {
        background: #f9fafb;
        border-color: #9ca3af;
      }
    }

    .submit-btn {
      height: 40px;
      padding: 0 20px;
      border-radius: 8px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      display: flex;
      align-items: center;
      gap: 8px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }
    }
  }
}

// 动画
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-header {
    .header-main {
      flex-direction: column;
      gap: 20px;
      text-align: center;
    }

    .header-stats {
      justify-content: center;
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 16px;

    .action-left,
    .action-right {
      width: 100%;
    }

    .search-container {
      flex-direction: column;

      .search-input {
        width: 100%;
      }
    }
  }

  .enhanced-table {
    :deep(.el-table__row) {
      &:hover {
        transform: none;
      }
    }
  }
}
</style>